<template>
  <div class="login-container">
    <!-- 跳转页面登录 -->
    <div class="login-page">
      <div class="l-header">
        <div class="content">
          <nuxt-link to="/" class="logo">
            <span
              class="img"
              style="font-size: 22px; font-weight: bold; margin-top: 10px"
              >沙鲜送</span
            >
            <!-- <img class="img" v-if="webConfigData.pcLogoImgText" :src="webConfigData.pcLogoImgText"/> -->
            <span class="text">沙鲜送</span>
          </nuxt-link>
          <div class="go-register">
            {{ $t('login.notRegisteredYet') }}
            <nuxt-link to="/register" class="register-btn">{{
              $t('login.registeredUsername')
            }}</nuxt-link>
          </div>
        </div>
      </div>
      <div
        class="l-content"
        :style="
          webConfigData.pcLoginBgImg
            ? {
                background: 'url(' + webConfigData.pcLoginBgImg + ') no-repeat',
              }
            : ''
        "
      >
        <div class="login">
          <div class="login-box">
            <div class="login-header">
              <div
                :class="['item', loginType == 1 ? 'active' : '']"
                @click="changeLoginType($event)"
                data-logintype="1"
              >
                {{ $t('login.mobileLogin') }}
              </div>
              <div
                :class="['item', loginType == 0 ? 'active' : '']"
                @click="changeLoginType($event)"
                data-logintype="0"
              >
                {{ $t('login.accountLogin') }}
              </div>
            </div>
            <!-- 账号登录 -->
            <div class="login-con" v-if="loginType == 0">
              <div
                :class="['item', 'account', errorTips == 3 ? 'msg-error' : '']"
              >
                <div class="icon"></div>
                <input
                  type="text"
                  @keyup.enter="login"
                  class="input"
                  v-model="userName"
                  :placeholder="$t('login.enterUsername')"
                />
                <div
                  class="cancel"
                  @click="clearInput($event)"
                  data-type="userName"
                ></div>
              </div>
              <div class="error" v-show="errorTips == 3">
                {{ $t('login.accountRestrictions') }}
              </div>
              <div
                :class="['item', 'password', errorTips == 4 ? 'msg-error' : '']"
              >
                <div class="icon"></div>
                <input
                  type="password"
                  class="input"
                  v-model="password"
                  @keyup.enter="login"
                  :placeholder="$t('login.enterPassword')"
                />
                <div
                  class="cancel"
                  @click="clearInput($event)"
                  data-type="password"
                ></div>
              </div>
              <!-- <div class="error" v-show="errorTips" >{{['','请输入正确的手机号','请输入验证码','账号为4~16位字母、数字或下划线','请输入密码','验证码有误','请同意下方条款'][errorTips]}}</div> -->
              <div class="error" v-show="errorTips == 4">
                {{ $t('login.enterPassword') }}
              </div>
              <div class="error" v-show="errorTips == 6">
                {{ $t('login.pleaseAgreefollowingTerms') }}
              </div>
              <a
                href="javascript:void(0)"
                class="login-button"
                @click="login"
                >{{ $t('login.login') }}</a
              >
              <div
                :class="[
                  'agree-box',
                  this.$t('language') == 'en' ? 'agree-box-en' : '',
                ]"
              >
                <!-- <input
                  type="checkbox"
                  @click="checkAgree"
                  :class="['checkbox',isAgree?'checked': 'default']"
                  class="checkbox default"
                /> -->
                <span class="text">
                  {{ $t('login.consentOfLoginRepresentative') }}
                  <a
                    href="javascript:void(0)"
                    class="agreement"
                    @click="toTermsPage(0)"
                    >{{ $t('login.termsOfService') }}</a
                  >{{ $t('login.and') }}
                  <a
                    href="javascript:void(0)"
                    class="agreement"
                    @click="toTermsPage(1)"
                    >{{ $t('login.privacyPolicy') }}</a
                  >
                </span>
              </div>
            </div>
            <!-- /账号登录 -->
            <!-- 手机登录 -->
            <div class="login-con" v-if="loginType == 1">
              <div
                :class="['item', 'phone', errorTips == 1 ? 'msg-error' : '']"
              >
                <div class="icon"></div>
                <input
                  type="text"
                  @keyup.enter="login"
                  class="input"
                  v-model="mobile"
                  :placeholder="$t('login.enterUserNumber')"
                />
                <div
                  class="cancel"
                  @click="clearInput($event)"
                  data-type="mobile"
                ></div>
              </div>
              <div class="error" v-show="errorTips == 1">
                {{ $t('register.enterValidPhone') }}
              </div>
              <div :class="['item', 'code', errorTips == 2 ? 'msg-error' : '']">
                <div class="icon"></div>
                <input
                  type="text"
                  class="input"
                  v-model="validCode"
                  @keyup.enter="login"
                  :placeholder="$t('login.enterCode')"
                  :style="{ width: $t('language') == 'en' ? '100px' : '150px' }"
                />
                <a
                  href="javascript:void(0);"
                  class="send-code"
                  v-show="show"
                  @click="getCode"
                  :style="{ width: $t('language') == 'en' ? '139px' : '89px' }"
                  >{{ $t('login.getCode') }}</a
                >
                <span
                  v-show="!show"
                  class="send-code"
                  :style="{ width: $t('language') == 'en' ? '139px' : '89px' }"
                  style="cursor: not-allowed"
                  >{{ count }} s</span
                >
              </div>
              <!-- <div class="error" v-show="errorTips" >{{['','请输入正确的手机号','请输入验证码','账号为4~16位字母、数字或下划线','请输入密码','验证码有误','请同意下方条款'][errorTips]}}</div> -->
              <div class="error" v-show="errorTips == 2">
                {{ $t('login.enterCode') }}
              </div>
              <div class="error" v-show="errorTips == 6">
                {{ $t('login.pleaseAgreefollowingTerms') }}
              </div>
              <a
                href="javascript:void(0)"
                @click="login"
                class="login-button"
                >{{ $t('login.login') }}</a
              >
              <div
                :class="[
                  'agree-box',
                  this.$t('language') == 'en' ? 'agree-box-en' : '',
                ]"
              >
                <!-- <input
                  type="checkbox"
                  @keyup.enter="login"
                  @click="checkAgree"
                  :class="['checkbox',isAgree?'checked': 'default']"
                  class="checkbox default"
                /> -->
                <span class="text">
                  {{ $t('login.consentOfLoginRepresentative') }}
                  <a
                    href="javascript:void(0)"
                    class="agreement"
                    @click="toTermsPage(0)"
                    >{{ $t('login.termsOfService') }}</a
                  >{{ $t('login.and') }}
                  <a
                    href="javascript:void(0)"
                    class="agreement"
                    @click="toTermsPage(1)"
                    >{{ $t('login.privacyPolicy') }}</a
                  >
                </span>
              </div>
            </div>
            <!-- /手机登录 -->

            <div class="login-footer">
              <!-- <div class="other-login">
                <a href=""
                   class="item qq-login">QQ</a>
                <a href=""
                   class="item weixin-login">微信</a>
              </div>-->
              <nuxt-link to="/register" class="footer-a">{{
                $t('register.registerNow')
              }}</nuxt-link>
              <nuxt-link to="/forget-password" class="footer-a">{{
                $t('login.forgotYourPassword')
              }}</nuxt-link>
            </div>
          </div>
        </div>
      </div>
      <div class="l-footer content">
        <div class="links">
          <nuxt-link to="/" class="item">{{
            $t('ucPassword.mallHome')
          }}</nuxt-link>
          <nuxt-link
            to="/user-center"
            class="item"
            v-show="!this.$route.name === 'login'"
            >{{ $t('commonHead.personalCenter') }}</nuxt-link
          >
          <a href="https://www.gz-yami.com/" target="_blank" class="item">{{
            $t('commonFoot.officialWebsite')
          }}</a>
          <a href="https://www.mall4j.com/" target="_blank" class="item">{{
            $t('commonFoot.openSourceWebsite')
          }}</a>
        </div>
        <div class="copyright">
          ©Copyright 2021 福建沙味天下信息技术有限公司 版权所有 |
          闽ICP备<a target="view_window" href="https://beian.miit.gov.cn" style="color:#666;">2021018819</a>号
        </div>
        <!-- <div class="copyright">{{$t('language')=='zh'?webConfigData.pcCopyrightCn:webConfigData.pcCopyrightEn}}</div> -->
        <!--<div class="copyright">©Copyright 2021 湖南洛云商城有限公司 版权所有 | 湘ICP备2021012025号</div>-->
      </div>
    </div>
    <!-- /跳转页面登录 -->
  </div>
</template>

<script>
import Cookie from 'js-cookie'
import util from '~/plugins/util'
export default {
  layout: 'empty',
  data() {
    return {
      loginType: 0, // 1手机登录 0账号登录
      mobile: '',
      validCode: '',
      userName: '',
      password: '',
      imgValid: '',
      errorTips: 0, // 输入错误提示:  1手机号输入错误  2验证码输入错误  3账号输入错误  4密码输入错误 5图形验证码错误 6未同意条款
      // 验证码相关
      show: true,
      count: '',
      timer: null,
      hadGotCode: false,

      isAgree: true, // 是否同意条款
      isLogging: false, //是否正在登录
      webConfigData: {}, // 网站配置信息
    }
  },
  methods: {
    /**
     * 切换登录方式
     */
    changeLoginType(e) {
      this.loginType = e.target.dataset.logintype
      this.errorTips = 0
      this.mobile = ''
      this.validCode = ''
      this.userName = ''
      this.password = ''
      this.imgValid = ''
    },
    /**
     * 获取登录验证码
     */
    getCode() {
      if (!util.checkPhoneNumber(this.mobile)) {
        this.errorTips = 1
        return
      }
      // if (this.hadGotCode) {
      //   return
      // }
      this.errorTips = 0
      let sendSmsParam = {
        mobile: this.mobile,
      }
      this.$axios.post('/sms/sendLoginCode', sendSmsParam).then(({ data }) => {
        this.hadGotCode = true
        const timeCount = 60
        if (!this.timer) {
          this.count = timeCount
          this.show = false
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= timeCount) {
              this.count--
            } else {
              this.show = true
              clearInterval(this.timer)
              this.timer = null
              this.hadGotCode = false
            }
          }, 1000)
        }
      })
    },

    /**
     * 登录
     */
    login() {
      if (this.loginType == 1) {
        // 手机验证码登录
        if (!util.checkPhoneNumber(this.mobile)) {
          this.errorTips = 1
          return
        } else if (!this.validCode.trim()) {
          this.errorTips = 2
          return
        } else if (!this.isAgree) {
          this.errorTips = 6
          return
        }
      } else {
        // 用户名密码
        if (!util.checkUserName(this.userName)) {
          this.errorTips = 3
          return
        } else if (!this.password.trim()) {
          this.errorTips = 4
          return
        } else if (!this.isAgree) {
          this.errorTips = 6
          return
        }
      }
      this.errorTips = 0
      let data = {
        principal: this.mobile ? this.mobile : this.userName,
        credentials: this.loginType == 0 ? this.password : this.validCode,
        appType: 3,
        loginType: this.loginType,
      }
      if (this.isLogging) {
        return
      } else {
        this.$axios.post('/login', data).then(({ data }) => {
          this.isLogging = true
          // var expire = new Date(new Date().getTime() + 1 * 60 * 1000)  // token 过期时间
          // Cookie.set('token', data.access_token,{ expires: expire })
          Cookie.set('token', data.access_token)
          localStorage.setItem('nickName', data.nickName)
          localStorage.setItem('userAvatar', data.pic)
          this.$router.push({ path: '/' })
        })
        this.$axios.onError((error) => {
          const code = parseInt(error.response.status)
          if (code == 500) {
            Message.error(error.response.message)
            ;(this.mobile = ''), (this.validCode = '')
          }
        })
      }
    },

    /**
     * 清除输入框内容
     */
    clearInput(e) {
      const type = e.target.dataset.type
      switch (type) {
        case 'mobile':
          this.mobile = ''
          break
        case 'userName':
          this.userName = ''
          break
        case 'password':
          this.password = ''
          break
        default:
          break
      }
    },

    /**
     * 跳转到《服务条款》或《隐私协议》
     */
    toTermsPage(sts) {
      this.$router.push({ path: '/termsPage?sts=' + sts })
    },
    /**
     * 同意条款
     */
    // checkAgree () {
    //   this.isAgree = !this.isAgree
    //   if (this.errorTips == 6) {
    //     this.errorTips = 0
    //   }
    // }
  },
  mounted() {
    this.$axios.get('/webConfig/getPcWebConfig').then(({ data }) => {
      this.webConfigData = data
      localStorage.setItem('webConfig', JSON.stringify(data))
    })
    document.title = this.$t('login.login')
  },
}
</script>
<style scoped src='~/assets/css/login.css'>
</style>
